<template>
  <div>
    <div class="header">
      <h4>今日数据</h4>
      <span class="time">
        <i><el-button type="text" :loading="flag" @click="reflesh">
          <template>
            <i v-if="!flag" class="el-icon-refresh" />
          </template>
        </el-button>{{ time }}</i>
      </span>
    </div>
    <div class="content">
      <div>
        <p class="count">订单金额(元)</p>
        <p class="num">{{ list.orderAmount?Number(list.orderAmount).toLocaleString():0 }}</p>
        <p class="up">较昨日 +{{ list.orderAmountChanges?Number(list.orderAmountChanges).toLocaleString():0 }}<i class="el-icon-top" /></p>
      </div>
      <div>
        <p class="count">订单金额(元)</p>
        <p class="num">{{ list.orderNumber?Number(list.orderNumber).toLocaleString():0 }}</p>
        <p class="up">较昨日 +{{ list.orderNumberChanges?list.orderNumberChanges.toLocaleString():0 }} <i class="el-icon-top" /></p>
      </div>
      <div>
        <p class="count">订单金额(元)</p>
        <p class="num">{{ list.transportTaskNumber?Number(list.transportTaskNumber).toLocaleString():0 }}</p>
        <p class="up">较昨日 +{{ list.transportTaskNumber?Number(list.transportTaskNumberChanges).toLocaleString():0 }} <i class="el-icon-top" /></p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
mapGetters
export default {

  data() {
    return {
      flag: false,
      time: new Date().toLocaleString().replaceAll('/', '-')
    }
  },
  computed: {
    ...mapGetters('dashboard', ['listData']),
    list() {
      return this.listData.todayData ? this.listData.todayData : {}
    }
  },
  methods: {
    ...mapActions('dashboard', ['getData']),
    async reflesh() {
      this.flag = true
      try {
        await this.getData()
      } catch (error) {
        this.$message.error('刷新失败，请重试')
        this.flag = false
      }
      this.$message.success('刷新成功')
      this.flag = false
      this.time = new Date().toLocaleString().replaceAll('/', '-')
    }
  }

}
</script>

<style lang="scss" scoped>
p{
  margin: 0;
}
.header{
    h4{
        margin: 0;
    }
    display: flex;
    justify-content: space-between;
    .time{
    font-size: 14px;
    color: #818693;
    display: flex;
    -webkit-box-align: center;
    cursor: pointer;
    }
}
.content{
  margin-top: 46px;
  padding-left: 50px;
  padding-right: 15px;
  display: flex;
  justify-content: space-between;
  div{
    height: 30%;
    .count{
      font-size: 14px;
    color: #20232a;
    margin-bottom: 21px;
    }
    .num{
      font-size: 36px;
    color: #20232a;
    font-weight: 700;
    margin-bottom: 24px;
    }
    .up{
      font-size: 14px;
    color: #818693;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    padding-left: 9px;
    }
  }
}
.time{
  i{
      font-size: 14px;
    font-style: normal;
    }
}
.el-icon-top{
  color: #e15638;
  font-weight: 900;
  font-size: 16px;
}
 .el-icon-refresh{
  color: #e15638;
  font-weight: 900;
  font-size: 16px;
 }

</style>
